<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_2223764_fj8jh0i5k7v.css">
    <!-- <link rel="stylesheet" href="http://at.alicdn.com/t/font_2223764_fhmclwkrchw.css"> -->
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }



    .content .lc1 {
        width: 1152px;
        height: 434px;
        margin: 0 auto;

        text-align: center;
        padding-left: 50px;
        background-color: rgba(0.96, 0.97, 0.98, 0.1);
    }

    .lc1title {
        /* margin: 0 40px; */
        width: 100%;
        height: 36px;
        display: flex;
        justify-content: space-between;
    }

    .content .lc1title img {
        height: 36px;
    }



    .lc2 {
        width: 80%;
        height: 600px;
        background-color: #e75f5f;

    }

    .lc3 {
        width: 80%;
        height: 400px;
        background-color: #ff7a22;

    }

    .lc4 {
        width: 80%;
        height: 400px;
        background-color: #3051f6;

    }

    .lc5 {
        width: 80%;
        height: 400px;
        background-color: #ffc8a3;

    }

    .lc6 {

        width: 80%;
        height: 400px;
        background-color: #78f765;

    }

    .left {
        position: fixed;
        left: 50px;
        top: 50%;
        transform: translateY(-50%);
    }

    .leftul li {
        cursor: pointer;

        list-style: none;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid rgba(226, 55, 21, 0.3);
        background-color: #ccc;
    }

    .lcy {
        margin-top: 200px;
        margin-left: 200px;

    }

    .active {
        color: #ff0000;
    }

    .lc1 img {
        height: 606px;
    }

    .nav_title {
        width: 100%;
        height: 72px;
        position: fixed;
        top: 0;
        font-size: 14px;
        background-color: rgb(140, 140, 140);
        display: flex;
        justify-content: space-around;

    }

    .nav_title img {
        width: 126px;
        height: 72px;
        margin-left: 4px;
    }

    .nav_title_a {
        width: 500px;

    }

    .nav_title_a a {
        margin-left: 10px;
        text-decoration: none;
        color: #000;
        font-size: 14px;
        line-height: 72px;

    }

    .nav_title_put {
        width: 275px;
        height: 72px;
        line-height: 72px;
    }

    .nav_title_right {
        width: 391.26px;
        height: 72px;

    }

    .nav_title_right a {
        margin-left: 10px;
        text-decoration: none;
        color: rgb(117, 117, 117);
        font-size: 14px;
        line-height: 72px;

    }

    .second {
        width: 1200px;
        height: 382px;
        padding: 32px auto;
        margin: 102px auto 50px;
        display: flex;
        position: relative;

    }

    .second_left {
        width: 256px;
        height: 367px;
        cursor: pointer;
        padding-top: 17px;
        background-color: rgba(3, 21, 113, 0.7);
    }

    .second_left li:hover {
        /* cursor: pointer; */
        background-color: rgba(184, 184, 184, 0.3);

    }

    .second_left_box {
        list-style: none;
        font-size: 14px;
        padding-top: 10px;
        line-height: 50px;
        margin-left: 4px;
    }

    .second_right {
        top: 0px;
        width: 944px;
        height: 100%;
        position: relative;
        /* border: 1px solid red; */
    }

    .second_right img {
        position: absolute;
        width: 944px;
        height: 384px;
        opacity: 0;
        transition: all 1s;
    }

    .second_right .active {
        opacity: 1;

    }

    .yuandian {
        position: absolute;
        width: 130px;
        height: 30px;
        right: 0;
        bottom: 0px;
        /* display: flex;
        justify-content: space-around; */
    }

    .yuandian li {
        margin-left: 10px;
        float: left;
        list-style-type: none;
        width: 0px;
        height: 0px;
        border: 4px solid rgba(255, 252, 252, 0.8);
        border-radius: 34%;
    }

    .yuandian .active {
        width: 20px;
        transition: all 1s;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .second .jiantouz {
        border-radius: 50%;
        top: 50%;
        z-index: 1;
        font-size: 40px;
        width: 50px;
        height: 50px;
        background: rgba(28, 31, 33, 0.1) url(/慕课img/left箭头.png)no-repeat center / 16px auto;
        margin-left: 257px;
        position: absolute;
    }

    .second .jiantouy:hover {
        cursor: pointer;
        background: rgba(28, 31, 33, 0.3) url(/慕课img/left箭头.png) no-repeat center / 16px auto;
    }

    .second .jiantouz:hover {
        cursor: pointer;
        background: rgba(28, 31, 33, 0.3) url(/慕课img/left箭头.png) no-repeat center / 16px auto;
    }

    .second .jiantouy {
        border-radius: 50%;
        background: rgba(28, 31, 33, 0.1) url(/慕课img/left箭头.png)no-repeat center / 16px auto;
        transform: rotate(180deg);
        right: 0;
        width: 50px;
        height: 50px;
        z-index: 1;
        top: 50%;
        position: absolute;
    }

    .second_left_right {
        position: absolute;
        left: 256px;
        top: 0;
        width: 776px;
        height: 382px;
        background: #FFFFFF;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
        border-radius: 0 12px 12px 0;
        z-index: 2;
        box-sizing: border-box;
        /* opacity: 0; */
        display: none;
    }

    .second_left_box li:hover .second_left_right {
        display: block;
    }

    .second_left_right_top {
        width: 776px;
        height: 118px;
    }

    .second_left_right_top p span {
        margin-left: 50px;
    }

    .second_left_right_top p a {
        text-decoration: none;
        color: black;
        margin-left: 10px;
        margin-right: 20px;
    }

    .second_left_right_bot {
        width: 776px;
        background-color: #f3f5f6;
        height: 204px;
    }

    .second_left_right_bot .second_left_right_bot1 {
        float: left;
        /* padding: 35px 36px; */
        padding: 35px 24px 30px 35px;
        width: 329px;
        height: 50px;
        margin-bottom: 30px;
        background-color: #fff;
        display: flex;
        /* flex: row; */
        justify-content: space-between;
    }

    .second_left_right_bot1 img {
        width: 90px;
        height: 50px;
    }

    .second_left_right_bot1z {
        width: 228px;
        height: 50px;
    }

    .nav_dl {
        position: fixed;
        width: 384px;
        display: none;
        height: 363px;
        padding-top: 10px;
        padding-bottom: 20px;
        left: 20%;
        top: 50%;
        margin: -192px 0 0 -192px;
        box-shadow: 0 12px 24px 0 rgba(28, 31, 33, .1);
        border-radius: 12px;
        background-color: #fff;
        z-index: 2;
        /* display: block; */
    }

    .nav_zc {
        position: fixed;
        width: 384px;
        height: 363px;
        padding-top: 10px;
        padding-bottom: 20px;
        left: 20%;
        display: none;
        top: 50%;
        margin: -192px 0 0 -192px;
        box-shadow: 0 12px 24px 0 rgba(28, 31, 33, .1);
        border-radius: 12px;
        background-color: #fff;
        z-index: 10;
    }

    .nav_dl .dl_zh {
        padding: 0 32px;

    }

    .nav_zc .zc_zh {
        padding: 0 32px;

    }

    .nav_dl .dl_mm {
        padding: 0 32px;

    }

    .nav_zc .zc_mm {
        padding: 0 32px;

    }

    .nav-dltitle {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .nav-zctitle {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .dl_content {
        margin: 0 auto;
    }


    .zc_content {
        margin: 0 auto;
    }

    .dl_gb {
        position: absolute;
        top: 17px;
        right: 20px;
        width: 17px;
        height: 17px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
    }

    .zc_gb {
        position: absolute;
        top: 17px;
        right: 20px;
        width: 17px;
        height: 17px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
    }

    .dl_zh {
        height: 48px;
        line-height: 20px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        border-radius: 8px;
        border: 0;
    }

    .zc_zh {
        height: 48px;
        position: relative;
        line-height: 20px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        border-radius: 8px;
        border: 0;
    }

    .zc_zh .zcsj a {
        position: absolute;
        top: 30px;
        text-decoration: none;
        color: black;
        left: 35px;
    }

    .dl_zh input {
        outline: none;
        width: 100%;
        height: 48px;
        margin-top: 10px;
        line-height: 20px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        background: rgba(28, 31, 33, .06);
        border-radius: 8px;
        border: 0;
    }

    .zc_zh input {
        outline: none;
        width: 100%;
        margin-top: 15px;
        height: 48px;
        line-height: 20px;
        box-sizing: border-box;
        padding-left: 74px;
        box-shadow: 2px 0 5px 0 #fff;
        background: rgba(28, 31, 33, .06);
        border-radius: 8px;
        border: 0;
    }

    .dl_zh_cw {
        font-size: 10px;
        color: red;
        height: 20px;
        width: 320px;
        visibility: hidden;
    }

    .zc_zh_cw {
        font-size: 10px;
        color: red;
        height: 20px;
        width: 320px;
        visibility: hidden;
    }

    .dl_zh_cw.active {
        visibility: visible;

    }

    .zc_zh_cw.active {
        visibility: visible;

    }

    .dl_mm_cw.active {
        visibility: visible;

    }

    .zc_mm_cw.active {
        visibility: visible;

    }

    .dl_mm_cw {
        font-size: 10px;
        height: 20px;
        width: 320px;
        color: red;
        visibility: hidden;
    }

    .zc_mm_cw {
        font-size: 10px;
        height: 20px;
        width: 320px;
        color: red;
        visibility: hidden;
    }

    .dl_mm {
        margin-top: 30px;
        height: 48px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        border-radius: 8px;
        border: 0;
    }

    .zc_mm {
        margin-top: 30px;
        height: 48px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        border-radius: 8px;
        border: 0;
    }

    .dl_mm input {
        outline: none;
        width: 100%;
        height: 48px;
        line-height: 20px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        background: rgba(28, 31, 33, .06);
        border-radius: 8px;
        border: 0;
    }

    .zc_mm input {
        outline: none;
        width: 100%;
        height: 48px;
        line-height: 20px;
        box-sizing: border-box;
        padding: 14px;
        box-shadow: 2px 0 5px 0 #fff;
        background: rgba(28, 31, 33, .06);
        border-radius: 8px;
        border: 0;
    }


    .dl_xxk {
        display: flex;
        justify-content: space-around;
        width: 320px;
        height: 20px;
        margin: 0 auto;
        color: #9199a1;

    }
.dl_bottom_t {
    text-align: center;

}
    .dl_bottom_t span {
        font-size: 14px;
        color: #f20d0d;
        cursor: pointer;
        margin: 0 30px 0 24px;
        margin-top: 15px;
        padding-right : 24px;
        border-right: 1px solid #1a1c1f21;
    }
    .dl_bottom_b {
    text-align: center;

}
    .dl_bottom_b span {
        font-size: 14px;
        color: #f20d0d;
        cursor: pointer;
        margin: 0 30px 0 24px;
        margin-top: 15px;
        padding-right : 24px;
        border-right: 1px solid #1a1c1f21;
    }
    .dl_bottom_b {
        font-size: 12px;
        margin-top: 5px;
        text-align: center;
    }
    .zc_bottom_t span {
        font-size: 14px;
        color: #f20d0d;
        cursor: pointer;
        margin: 0 30px 0 24px;
        margin-top: 15px;
        padding-right : 24px;
        border-right: 1px solid #1a1c1f21;
    }
    .zc_bottom_t {
        font-size: 12px;
        margin-top: 5px;
        text-align: center;
    }
    .zc_xxk {
        display: flex;
        justify-content: space-around;
        width: 320px;
        height: 20px;
        margin: 0 auto;
        color: #9199a1;

    }

    .dl_xxk a {
        color: #9199a1;
        text-decoration: none;
    }

    .zc_xxk a {
        color: #9199a1;
        text-decoration: none;
    }

    .dlan {
        margin: 20px auto 0;
        width: 320px;
        height: 40px;
    }

    .zcan {
        margin: 20px auto 0;
        width: 320px;
        height: 40px;
    }

    .dlan .dlaninp {
        background-color: #f20d0d;
        width: 320px;
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        margin: 0 auto;
        color: rgb(226, 224, 224);
        border-radius: 50px;
        border-color:#f20d0d ;
        outline: none;
    }

    .zcan .zcaninp {
        background-color: #f20d0d;
        width: 320px;
        height: 40px;
        margin: 0 auto; 
         border-color:#f20d0d ;
        color: rgb(226, 224, 224);
        border-radius: 50px;
        outline: none;
    }
  
    /* .span1:hover::after {
        position: absolute;
        content: " ";
        top: 50px;
        left: 30px;
        width: 16px;
        height: 4px;
        line-height: 4px;
        background-color: #f20d0d;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    } */
  .span1::after{
        position: absolute;
        content: " ";
        top: 50px;
        left: 30px;
        width: 16px;
        height: 4px;
        line-height: 4px;
        background-color: #f20d0d;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    } 
    
    .span2:hover::after {
        position: absolute;
        content: " ";
        top: 50px;
        left: 105px;
        width: 16px;
        height: 4px;
        line-height: 4px;
        background-color: #f20d0d;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    }
    .span11:hover::after {
        position: absolute;
        content: " ";
        top: 50px;
        left: 30px;
        width: 16px;
        height: 4px;
        line-height: 4px;
        background-color: #f20d0d;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    }
    .span22::after {
        position: absolute;
        content: " ";
        top: 50px;
        left: 105px;
        width: 16px;
        height: 4px;
        line-height: 4px;
        background-color: #f20d0d;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    }
    
.dl_bottom_b{
    color:rgb(138, 138, 138) ;

}
.dl_bottom_b a{
color: blue;
text-decoration: none;
}
    .span22:hover::after {
        position: absolute;
        content: " ";
        top: 50px;
        left: 105px;
        width: 16px;
        height: 4px;
        line-height: 4px;
        background-color: #f20d0d;
        border-radius: 2px;
        display: block;
        margin: 0 auto;
    }
 .code{
    position: absolute;
    right: 0;
    bottom: -4px;
    cursor: pointer;
}

 .dl_bottom_t .iconfont {
        font-size: 30px;   
         line-height: 40px;
        color: rgb(138, 138, 138);
        cursor: pointer;
        margin-left: 10px;
        margin-top: 20px;
    }
    .zc_bottom_t .iconfont {
        font-size: 30px;
        color: rgb(138, 138, 138);
        cursor: pointer;
        margin-left: 10px;
    }
  .icon-logo-wechat:hover{
      color: #3ff20d;
  }
.icon-logo-qq:hover{
    color: #624be7;
}
    .icon-xinlangweibo:hover {
        color: #f20d0d;
    }

    .icon-yanjing {
        font-size: 30px;
        position: absolute;
        right: 46px;
        color: rgb(138, 138, 138);
        top: 139px;
        display: none;
    }

    .icon-yanjing1 {
        top: 137px;
        font-size: 30px;
        position: absolute;
        right: 46px;
        color: rgb(138, 138, 138);
        display: block;
    }
</style>

<body>
    <div class="home">
        <div class="nav_title">
            <img src="../慕课img/慕课logo.png" alt="">
            <div class="nav_title_a">
                <a href="">免费课程</a>
                <a href="">实战课程</a>
                <a href="">金职位</a>
                <a href="">慕课教程 </a>
                <a href="">专栏</a>
                <a href="">手记</a>
            </div>
            <div class="nav_title_put">
                <input type="text">
            </div>
            <div class="nav_title_right">
                <a href="">下载APP</a>
                <a href=""><span></span>购物车</a>
                <a href="" class="open1">登录</a> &nbsp<span> /</span>
                <a href="" class="open2">注册</a>
            </div>


        </div>
        <div class="second">
            <div class="second_left">
                <ul class="second_left_box">
                    <li class="se">前端开发：HTML5/Vue.js/Node.js
                        <span class="iconfont icon-yousanjiao"></span>
                    </li>
                </ul>

            </div>
            <div class="second_left_right">
                <div class="second_left_right_top">
                    <h3>&nbsp&nbsp&nbsp&nbsp 后端开发</h3>
                    <p>
                        <span>知识点：</span><a href="">JAVA/</a>
                        <a href="">Python/</a>
                        <a href="">运维、</a>
                        <a href="">自动化运维</a>
                        <a href="">运维工具</a>
                        <a href="">中间件</a>
                        <a href="">Linux</a>
                        <a href="">测试</a>
                        <a href="">功能测试</a>
                        <a href="">接口测试</a></p>
                </div>
                <div class="second_left_right_bot">
                    <div class="second_left_right_bot1">
                        <img src="../慕课img/javaT.png" alt="">
                        <div class="second_left_right_bot1z">
                            <div class="second_left_right_bot1t">Spark3大数据实时处理</div>
                            <div class="second_left_right_bot1b">2999元</div>
                        </div>
                    </div>

                    <div class="second_left_right_bot1">
                        <img src="../慕课img/javaT.png" alt="">
                        <div class="second_left_right_bot1z">
                            <div class="second_left_right_bot1t">Spark3大数据实时处理</div>
                            <div class="second_left_right_bot1b">2999元</div>
                        </div>
                    </div>
                    <div class="second_left_right_bot1">
                        <img src="../慕课img/javaT.png" alt="">
                        <div class="second_left_right_bot1z">
                            <div class="second_left_right_bot1t">Spark3大数据实时处理</div>
                            <div class="second_left_right_bot1b">2999元</div>
                        </div>

                    </div>
                    <div class="second_left_right_bot1">
                        <img src="../慕课img/javaT.png" alt="">
                        <div class="second_left_right_bot1z">
                            <div class="second_left_right_bot1t">Spark3大数据实时处理</div>
                            <div class="second_left_right_bot1b">2999元</div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="second_right">

                <img src="../慕课img/慕课轮播1.jpg" alt="" class="active">
                <img src="../慕课img/慕课轮播2.jpg" alt="">
                <img src="../慕课img/慕课轮播3.jpg" alt="">
                <img src="../慕课img/慕课轮播4.jpg" alt="">
                <img src="../慕课img/慕课轮播5.jpg" alt="">
            </div>

            <div class="jiantouz"></div>
            <div class="jiantouy"></div>
            <ul class="yuandian">
                <li data-i="0" class="active"></li>
                <li data-i="1" class=""></li>
                <li data-i="2" class=""></li>
                <li data-i="3" class=""></li>
                <li data-i="4" class=""></li>
            </ul>




        </div>
        <div class="content">
            <div class="lc1 lcy box  ">
                <div class="lc1title">
                    <img src="../慕课img/精品体系.png" alt="">全部&gt;</div>
                <div class="lc1content"></div>
            </div>
            <div class="lc2 lcy box ">新上好课</div>
            <div class="lc3 lcy box"> 进站必学</div>
            <div class="lc5 lcy box"> 实战路线</div>
            <div class="lc4 lcy box">慕课专栏</div>
            <div class="lc5 lcy box"> 限时拼团</div>

        </div>
        <div class="nav_dl">
            <div class="nav-dltitle">
                <h3> &nbsp;&nbsp;&nbsp;&nbsp;<span class="span1">登录</span> &nbsp;&nbsp;&nbsp;&nbsp;<span
                        class="xhx"></span>
                    <span class="span2">注册</span>
                    <span class="xhx"></span>
                    <button type="button" class="dl_gb">X</button></h3>
            </div>
            <div class="dl_content active " style="display: block;">
                <div class="dl_zh">
                    <input type="text" class="dlinp" placeholder="请输入登录手机号/邮箱">
                    <p class="dl_zh_cw"> 请输入正确手机号或者邮箱号</p>


                </div>
                <div class="dl_mm">
                    <input type="password" class="mminp" placeholder="请输入密码">
                    <span class="iconfont icon-yanjing1"></span>
                    <span class="iconfont icon-yanjing"></span>
                    <p class="dl_mm_cw"> 请输入正确密码</p>

                </div><br>
                <div class="dl_xxk">
                    <input type="checkbox" checked="checked" style="margin-top: 5px;">
                    <span>7天内自动登录</span>
                    <a href="">无法登录</a>
                    <span>|</span>
                    <a href="">找回密码</a>
                </div>
                <div class="dlan">
                    <input type="button" value="登 录" name="" id="" class="dlaninp">
                </div>
                <div class="dl_bottom">
                    <div class="dl_bottom_t">
                        <div><span>手机短信登陆</span>    <i class="iconfont icon-xinlangweibo"></i>
                            <i class="iconfont icon-logo-qq"></i>
                            <i class="iconfont icon-logo-wechat"></i> </div>
                    </div>

                    <div class="dl_bottom_b">
                        登录即同意慕课网<a href="">《隐私政策》</a></div>
<div class="code"><img src="../慕课img/慕课登录界面二维码.png" alt=""></div>
                </div>
            </div>

        </div>

        <div class="nav_zc">
            <div class="nav-zctitle">
                <h3> &nbsp;&nbsp;&nbsp;&nbsp;<span class="span11">登录</span> &nbsp;&nbsp;&nbsp;&nbsp; <span
                        class="xhx"></span>
                    <span class="span22">注册</span>
                    <span class="xhx"></span>
                    <button type="button" class="zc_gb">X</button></h3>
            </div>
            <div class="zc_content">
                <div class="zc_zh">
                    <div class="zcsj">
                        <a href=""> <span>+86</span>
                            <span>▼</span></a> </div>
                    <input type="text" class="zcinp" placeholder="请输入需要注册的手机号">
                    <p class="zc_zh_cw"> 请输入需要注册的手机号</p>
                </div>
                <div class="zc_mm">
                    <input type="password" class="mminp" placeholder="请输入验证码">
                    <p class="zc_mm_cw"> 请输入正确的验证码</p>

                </div><br>
                <div class="zc_xxk">
                    <input type="checkbox" checked="checked" style="margin-top: 5px;">
                    <span>同意</span>
                    <a href="">《慕课网注册协议》</a>
                    <span>&</span>
                    <a href="">《隐私政策》 </a>
                </div>
                <div class="zcan">
                    <input type="button" value="注册" name="" id="" class="zcaninp">
                </div>
              
            </div>
              <div class="zc_bottom">
                    <div class="zc_bottom_t">
                        <div><span>其他方式登录</span>    <i class="iconfont icon-xinlangweibo"></i>
                            <i class="iconfont icon-logo-qq"></i>
                            <i class="iconfont icon-logo-wechat"></i> </div>
                    </div>
        </div> </div>
        <div class="left">
            <ul class="leftul">
                <li data-i="0" class="active">精品体系课</li>
                <li data-i="1"> 新上好课</li>
                <li data-i="2">进站必学</li>
                <li data-i="3"> 实战路线</li>
                <li data-i="4"> 慕课专栏</li>
                <li data-i="5"> 限时拼团 </li>
            </ul>
        </div>
   
</body>
<script>
    function $(e) {
        return document.querySelector(e);
    }
    var leftul = $('.leftul');
    var box = document.querySelectorAll('.box');
    var leftli = document.querySelectorAll('.leftul li');
    var second_left_box = $('.second_left_box');

    var arr1 = [{
            name: '前端开发：HTML5/Vue.js/Node.js',
            ysj: '',
        },
        {
            name: '后端开发：Java/Python/Go',
            ysj: '',
        },
        {
            name: '移动开发：Flutter/Android/iOS',
            ysj: '',
        },
        {
            name: '计算机基础：算法/数学/数据库',
            ysj: '',
        },
        {
            name: '前沿技术：AI/大数据/数据分析',
            ysj: '',
        },
        {
            name: '测试运维：自动化测试/容器',
            ysj: '',
        },
        {
            name: '更多方向：产品设计/UI设计/游戏',
            ysj: '',
        }
    ]
    var str1 = '';
    for (var i = 0; i < arr1.length; i++) {
        str1 += ' <li class="se">' + arr1[i].name + arr1[i].ysj + '    <span class="iconfont icon-yousanjiao"></span>' +
            '</li>'
    }
    second_left_box.innerHTML = str1;
    window.onscroll = function () {
        var top = window.scrollTop || document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < box.length; i++) {
            if (top > box[i].offsetTop - 100) {
                for (var j = 0; j < box.length; j++) {
                    leftli[j].classList.remove('active');
                }
                leftli[i].classList.add('active');
            }
        }
    }
    leftul.onclick = function (e) {
        if (e.target.localName == 'li') {
            var i = e.target.dataset.i;
            var top = box[i].offsetTop - 90
            window.scrollTo({
                top: top,
                behavior: 'smooth'
            })
        }
    }
    //轮播图区域
    var second_right = document.querySelectorAll('.second_right img');
    var active = $('active');
    var li1 = document.querySelectorAll('.yuandian li')
    var yuandian = $('.yuandian')
    var cont = 0;
    var jiantouz = $('.jiantouz');
    var jiantouy = $('.jiantouy');
    var content = document.querySelector('.second');

    var timer = setInterval(function a() {
        for (var i = 0; i < second_right.length; i++) {
            second_right[i].classList.remove('active'); //图片和原点同时动
            li1[i].classList.remove('active'); //图片和原点同时动
        }
        cont++;
        if (cont >= 5) {
            cont = 0;
        }
        second_right[cont].classList.add('active'); //图片和原点同时动
        li1[cont].classList.add('active'); //图片和原点同时动
        // console.log( second_right[cont])

    }, 1000)
    //左点击
    jiantouz.onclick = function () {

        for (var i = 0; i < second_right.length; i++) {
            second_right[i].classList.remove('active'); //图片和原点同时←动
            li1[i].classList.remove('active'); //图片和原点同时←动
        }
        cont--;
        if (cont <= 0) {
            cont = 4
        }
        // console.log(second_right[cont])
        second_right[cont].classList.add('active'); //图片和原点同时←动
        li1[cont].classList.add('active'); //图片和原点同时←动


    }
    //右点击
    jiantouy.onclick = function () {
        for (var i = 0; i < second_right.length; i++) {
            second_right[i].classList.remove('active'); //图片和原点同时→动
            li1[i].classList.remove('active'); //图片和原点同时→动
        }
        cont++;
        if (cont >= second_right.length) {
            cont = 0
        }
        // console.log(second_right[cont])

        second_right[cont].classList.add('active'); //图片和原点同时→动
        li1[cont].classList.add('active'); //图片和原点同时→动
    }
    content.onmouseenter = function () {
        //鼠标放在图片上的时候停止轮播
        clearInterval(timer);
    }
    content.onmouseleave = function () {
        //鼠标移除图片上的时候开始轮播，继续执行正常的轮播
        timer = setInterval(function () {
            for (var i = 0; i < second_right.length; i++) {
                second_right[i].classList.remove('active');
                li1[i].classList.remove('active');
            }
            cont++;
            if (cont >= 5) {
                cont = 0;
            }
            second_right[cont].classList.add('active');
            li1[cont].classList.add('active');
            // console.log(second_right[cont])

        }, 1000);
    }
    yuandian.onclick = function (e) {
        //圆点点击事件委托给ul进行选择，点击哪个跳转哪个
        if (e.target.localName == 'li') {
            //e就是函数形参，target翻译是目标，local Name是标签名，点击时li的时触发下边的代码
            cont = e.target.dataset.i;
            //cont就选择到点击的li的target里边的dataset选项里的i
            //    console.log(e)
            for (var i = 0; i < second_right.length; i++) {
                second_right[i].classList.remove('active');
                li1[i].classList.remove('active');
            }
            second_right[cont].classList.add('active');
            li1[cont].classList.add('active');
        }
    }

    //鼠标移入ul显示一个页面
    var second_left_right = $('.second_left_right');
    var second_left_box = document.querySelector('.second_left_box');

    second_left_box.onmouseover = function () {
        second_left_right.style = "display:block";
    }
    second_left_box.onmouseleave = function () {
        second_left_right.style = "display:none";
    }

    //登录界面正则表达式
    var dlinp = document.querySelector('.dlinp');
    var mminp = document.querySelector('.mminp');

    var cw1 = document.querySelector('.dl_zh_cw');
    var cw2 = document.querySelector('.dl_mm_cw');

    dlinp.onblur = function () {
        var val = this.value;
        var reg1 = /^1[3-9][0-9]{9}$/;
        var reg2 = /^[a-zA-Z1-9]\w*@(163|qq|sina|gmail).com$/;
        if (reg1.test(val) || reg2.test(val)) {
            this.nextElementSibling.classList.remove('active');
        } else {
            this.nextElementSibling.classList.add('active')
        }
    }
    mminp.onblur = function () {

        var val = this.value;
        var reg1 = /^\w{6,20}$/;
        if (reg1.test(val)) {
            this.nextElementSibling.classList.remove('active');
            console.log('active')
        } else {
            this.nextElementSibling.classList.add('active');
        }
    }

    //table切换
    var dljm = document.querySelector('.nav_dl');
    var zcjm = document.querySelector('.nav_zc');
    var dlspan1 = document.querySelector('.span1');
    var dlspan2 = document.querySelector('.span2');
    var open1 = document.querySelector('.open1');
    var open2 = document.querySelector('.open2');
    //open是主页面的登录注册
    //span是登录页面里的登录注册
    //span11是注册页面里的登录注册
    dlspan1.onclick = function () {
        zcjm.style = 'display:none;';
        dljm.style = 'display:block;';
        return false;
    }
    dlspan2.onclick = function () {
        dljm.style = 'display:none;';
        zcjm.style = 'display:block;';
        return false;
    }
    //登录界面的关闭按钮
    var dl_gb = document.querySelector('.dl_gb');
    dl_gb.onclick = function () {
        dljm.style = "display:none;";
        zcjm.style = "display:none;";
        return false;
    }
    open1.onclick = function () {
        zcjm.style = 'display:none;';
        dljm.style = 'display:block;';
        return false;
    }
    open2.onclick = function () {
        dljm.style = 'display:none;';
        zcjm.style = 'display:block;';
        return false;
    }
    //注册界面关闭按钮
    var zc_gb = document.querySelector('.zc_gb');
    var span22 = document.querySelector('.span22')
    var span11 = document.querySelector('.span11')
    span11.onclick = function () {
        zcjm.style = 'display:none;';
        dljm.style = 'display:block;';
        return false;
    }
    span22.onclick = function () {
        dljm.style = 'display:none;';
        zcjm.style = 'display:block;';
        return false;
    }
    zc_gb.onclick = function () {
        zcjm.style = "display:none;";
        dljm.style = "display:none;";
    }
    var yj1 = document.querySelector('.icon-yanjing');
    var yj2 = document.querySelector('.icon-yanjing1');
    yj1.onclick = function () {
        yj2.style = "display:block;";
        mminp.type='password';
        console.log(dlinp.type)
        yj1.style = "display:none;";
    }
    yj2.onclick = function () {
        yj2.style = "display:none;";
        mminp.type='text';
        // pwd.type='text';
        yj1.style = "display:block;";
    }
</script>

</html>